<style scoped lang="scss">
.content {
    width: 100%;
    .top {
        width: 100%;
        height: 250px;
        background-image: url('@/images-wd/image/hdpi/user_bg.png');
        background-size: 100% 100%;
    }
    .btm{
        width: 100%;
        height: 400px;
        position: relative;
        .dl1{
            align-items: center;
            position: absolute;
            left: 20px;
            top: -20px;
            display: flex;
            dt{
                img{
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            dd{
                margin-top: 20px;
                margin-left: 10px;
            }
        }
        .san{
            width: 90%;
            height: 120px;
            margin: auto;
            // border: 1px solid #ccc;
            display: flex;
            .left,.zhong,.right{
                width: 33.3%;
                height: 100%;
                border: 1px solid #ccc;
                dl{
                    
                    text-align: center;
                    line-height: 50px;
                }
            }
        }
        .div{
            width: 90%;
            margin: auto;
            height: 300px;
            span{
                display: flex;
                padding: 10px 0px;
                color: #81aee7;
            }
            div{
                width: 100%;
                height: 100px;
                border: 1px solid #ccc;
            }
        }
    }
}
</style>
<template>
    <div>
        <div class="zhu">
            <homeTop :showicon2="false" ></homeTop>
            <div class="content">
                <div class="top"></div>
                <div class="btm">
                    <dl class="dl1">
                        <dt>
                            <!-- <img :src="listData.userHeadPic" alt=""> -->
                             <Image :dataSrc="listData.userHeadPic" alt="" ></Image>
                        </dt>
                        <dd>
                            <h4>{{ listData.nickName }}</h4>
                        </dd>  
                    </dl>
                    <br>
                    <br>
                    <div class="san">
                        <div class="left">
                            <dl>
                                <dt>
                                    <span>{{ listData.height }}cm</span>
                                </dt>
                                <dd>
                                    <img src="@/images-wd/icon/hdpi/my_icon_height_n.png" alt="">
                                </dd>
                            </dl>
                        </div>
                        <div class="zhong">
                            <dl>
                                <dt>
                                    <span>{{ listData.weight }}kg</span>
                                </dt>
                                <dd>
                                    <img src="@/images-wd/icon/hdpi/my_icon_weight_n.png" alt="">
                                </dd>
                            </dl>
                        </div>
                        <div class="right">
                            <dl>
                                <dt>
                                    <span>{{ listData.age }}岁</span>
                                </dt>
                                <dd>
                                    <img src="@/images-wd/icon/hdpi/my_icon_age_n.png" alt="">
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div class="div">
                        <span>[主要病症]</span>
                        <div></div>
                        <span>[现病史]</span>
                        <div></div>
                        <span>[既往病史]</span>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import homeTop from '@/components/homeTop/index.vue'
import { getdetails } from '@/api/homeapi/index'
import { reactive, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import Image from '@/components/image/index.vue'
// 获取医生id和sessionId
const doctorId = JSON.parse(localStorage.getItem('doctorId') as string)
const sessionId = JSON.parse(localStorage.getItem('sessionId') as string)
const route = useRoute()
const userId = ref(route.query.userId)
const config = reactive({
    userId: userId.value,
})
const listData:any = ref([])
getdetails(doctorId, sessionId, config).then(res => {
    console.log(res);
    listData.value = res.data.result
})
</script>